<template>
    <div>
        <mu-button :color="this.buttonColor" @click="open">{{this.dialogCaptain}}</mu-button>
        <div>
            <mu-dialog :open.sync="dialog" width="360" max-width="80%" :title="dialogCaptain">
                <mu-form ref="form" :model="form" :auto-validate="false">
                    <mu-form-item label="用户名" prop="username" :error-text="error.username" :rules="usernameRules" label-float icon="account_circle">
                       <mu-text-field v-model="form.username" prop="username" full-width></mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="密码" prop="password" :error-text="error.password" :rules="passwordRules" label-float icon="lock">
                        <mu-text-field full-width v-model="form.password" :action-icon="visibility ? 'visibility' : 'visibility_off'" :action-click="() => (visibility = !visibility)" :type="visibility ? 'text' : 'password'"></mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="确认密码" prop="confirm" :rules="confirmRules" label-float icon="check_circle" v-if="isSignUp">
                      <mu-text-field full-width v-model="form.confirm" :action-icon="visibility ? 'visibility' : 'visibility_off'" :action-click="() => (visibility = !visibility)" :type="visibility ? 'text' : 'password'"></mu-text-field>
                    </mu-form-item>
                </mu-form>
                <mu-button flat slot="actions" color="primary" @click="sendAjax">{{dialogCaptain}}</mu-button>
                <mu-button flat slot="actions" color="primary" @click="close">关闭</mu-button>
            </mu-dialog>
            <mu-snackbar color="error" :open.sync="snackbar" position="top-end">
                <mu-icon left value="warning"></mu-icon>
                {{snackbarMessage}}
                <mu-button flat slot="action" color="#fff" @click="hideSnackbar">关闭</mu-button>
            </mu-snackbar>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            usernameRules: [
                { validate: val => !!val, message: "用户名不能为空" },
                {
                    validate: val => val.length >= 3,
                    message: "用户名长度需大于3"
                }
            ],
            passwordRules: [
                { validate: val => !!val, message: "密码不能为空" },
                {
                    validate: val => val.length >= 8,
                    message: "密码长度需大于8"
                }
            ],
            confirmRules: [
                {
                    validate: val => val !== this.form.password.data,
                    message: "两次密码不一致"
                }
            ],
            form: {
                username: "",
                password: "",
                confirm: ""
            },
            error: {
                username: "",
                password: ""
            },
            visibility: false,
            snackbar: false,
            snackbarMessage: "",
            dialog: false
        };
    },
    props: ["type", "action"],
    methods: {
        sendAjax() {
            this.error.username = "";
            this.error.password = "";
            if (this.$refs.form.validate()) {
                axios
                    .post("/" + this.action, {
                        usr: this.form.username,
                        pass: this.form.password
                    })
                    .then(result => {
                        var res = result.data;
                        if (res.success) {
                            this.$cookie.set("username", res.username);
                            this.close();
                            location.reload();
                            return true;
                        } else {
                            if (this.type == "signup") {
                                this.error.username = "用户名已存在";
                                return false;
                            }
                            if (!res.usernamePass) {
                                this.error.username = "用户名错误";
                                return false;
                            }
                            if (!res.passwordPass) {
                                this.error.password = "密码错误";
                                return false;
                            }
                        }
                    })
                    .catch(err => {
                        this.snackbarMessage =
                            "网络错误：" + err + "，请检查网络连接";
                        this.showSnackbar();
                        return false;
                    });
            }
        },
        open() {
            this.dialog = true;
        },
        close() {
            this.dialog = false;
            this.$refs.form.clear();
            this.form.username = "";
            this.form.password = "";
            this.visibility = false;
            this.form.confirm = "";
        },
        showSnackbar() {
            this.snackbar = true;
            if (this.snackTimer) clearTimeout(this.snackTimer);
            this.snackTimer = setTimeout(() => {
                this.snackbar = false;
            }, 5000);
        },
        hideSnackbar() {
            this.snackbar = false;
            if (this.snackTimer) clearTimeout(this.snackTimer);
        }
    },
    computed: {
        isSignUp() {
            return this.type === "signup";
        },
        buttonColor() {
            return this.type === "signup" ? "" : "primary";
        },
        dialogCaptain() {
            return this.type === "login" ? "登录" : "注册";
        }
    }
};
</script>
